<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>财务-体现申请</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/business.css">
</head>
<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="financeTitle">
        <button class="layui-btn layui-btn-ms">结算记录</button>
    </div>

    <div class="finance-record">
        <form action="##" class="layui-form">
            <div class="layui-form-item">
                <label for="" class="layui-form-label" style="width: 150px;">总结算金额</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" disabled v-model="allMoney">
                    <p class="tip">历史总的已结算金额(只增不减)</p>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label" style="width: 150px;">账户现有金额</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" disabled v-model="allMoney">
                    <p class="tip">当前账户可提现余额</p>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label" style="width: 150px;">服务费比例</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" disabled v-model="allMoney">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label" style="width: 150px;">输入提现金额</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 50px">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-primary " style="background: #1AB394;color: #fff;">计算</button>
                    <button class="layui-btn layui-btn-primary " style="background: #1c84c6;color: #fff;">确认计算</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script>
    layui.use(['form', 'laydate', 'laypage'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        //年月范围选择
        laydate.render({
            elem: '#test',
            range: true //或 range: '~' 来自定义分割字符
        });
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 50 //数据总数，从服务端得到
        });
    })
    new Vue({
        el: "#uniocn",
        data: {
            allMoney: "￥13.8",
        }
    })
</script>
</body>
</html>
